<?php
cs()->registerCssFile(themeUrl().'/styles/formBuilder/style.css');
cs()->registerScriptFile(themeUrl().'/scripts/formBuilder/base.js', CClientScript::POS_HEAD);
cs()->registerScriptFile(themeUrl().'/scripts/formBuilder/machform.js', CClientScript::POS_HEAD);
?>

<?php
$json_form = json_encode($form);
$all_element = array('elements' => $element);
$json_element = json_encode($all_element);
if ($form->id)
{
    echo CHtml::script('JJ(function(){display_form_properties();});');
}
?>


<div id="form_builder">


<div id="container">

<!--start panel-->
<div id="panel">
<!--Begin Main form -->
    <div id="main">
    <?php echo CHtml::beginForm('','post',array('id' => 'form_result')); ?>
        <ul id="form_elements"></ul>

        <div class="notification" style="display: <?php if(empty($element)){ echo 'block'; } else { echo 'none'; }; ?>;" id="nofields" onclick="display_fields(0)">
            <h2>You have no fields yet!</h2>
            <p>Click the buttons on the right to add fields to your form.</p>
        </div>

        <div id="div_button" class="buttons <?php if(empty($element)){ echo ' hide'; } ?>">
            <a href="#" id="form_save_button" class="positive">
            <img src="<?php echo themeUrl() ?>/images/formBuilder/icons/filesave.gif" alt="">Save Form</a>
        </div>
    <?php echo CHtml::endForm();?>

    <div id="debug_box"></div>
    </div>
<!--End Main form -->

<!--Begin Sidebar -->
    <div id="sidebar">
    <!-- tab header-->
    <ul id="tabs" class="add_field_tab">
    <li id="add_field_tab"><a href="javascript:display_fields(0);" title="Add a Field">Add a Field</a></li>
    <li id="field_prop_tab"><a href="javascript:display_field_properties();" title="Field Properties">Field Properties</a></li>
    <li id="form_prop_tab"><a href="javascript:display_form_properties();" title="Form Properties">Form Properties</a></li>
</ul>
    <!-- end tab header-->

    <!-- Elements -->
    <div style="display: block;" id="add_elements">
        <div style="padding-bottom: 5px; text-align: center"><img src="<?php echo themeUrl() ?>/images/formBuilder/click_to_add.gif" /></div>
        <div id="element_buttons">
            <ul id="first_column">
            <li><a id="single_line_text" href="javascript:insert_element('text')"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/single_line_text.gif" /></a></li>
            <li><a id="paragraph_text" href="javascript:insert_element('textarea');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/paragraph_text.gif" /></a></li>
            <li><a id="multiple_choice" href="javascript:insert_element('radio');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/multiple_choice.gif" /></a></li>
            <li><a id="name_text" href="javascript:insert_element('simple_name');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/name.gif" /></a></li>
            <li><a id="time" href="javascript:insert_element('time');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/time.gif" /></a></li>
            <li><a id="address" href="javascript:insert_element('address');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/address.gif" /></a></li>
            <li><a id="price" href="javascript:insert_element('currency');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/price.gif" /></a></li>
            <!--<li><a id="section_break" href="javascript:insert_element('section');" title="Organize your form."><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/section_break.gif" /></a></li>-->
        </ul>

            <ul id="second_column">
            <li><a id="number" href="javascript:insert_element('number');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/number.gif" /></a></li>
            <li><a id="checkboxes" href="javascript:insert_element('checkbox');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/checkboxes.gif" /></a></li>
            <li><a id="drop_down" href="javascript:insert_element('select');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/drop_down.gif" /></a></li>
            <li><a id="date" href="javascript:insert_element('date');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/date.gif" /></a></li>
            <li><a id="phone" href="javascript:insert_element('phone');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/phone.gif" /></a></li>
            <li><a id="web_site" href="javascript:insert_element('url');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/web_site.gif" /></a></li>
            <li><a id="email" href="javascript:insert_element('email');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/email.gif" /></a></li>
            <li><a id="file_upload" href="javascript:insert_element('file');"><img src="<?php echo themeUrl() ?>/images/formBuilder/button_text/file_upload.gif" /></a></li>
        </ul>
        </div>
    </div>

    <!-- Element properties -->
    <form style="display: block;" id="element_properties" action="" onsubmit="return false;">
        <div class="element_inactive" id="element_inactive">
        <h3><b>Please select a field</b></h3>
        <p>Click on a field on the left to change its properties.</p>
        </div>

        <div class="num" id="element_position">1</div>
        <ul id="all_properties">
            <li>
            <label class="desc" for="element_label">
                Field Label 
                <a href="#" class="tooltip" title="Field Label" rel="Field Label is one or two words placed directly above the field.">(?)</a>
            </label>
            <input id="element_label" class="text text large" onkeyup="set_properties(this.value, 'title')" onblur="set_properties(this.value, 'title')" />
        </li>

            <li class="left half" id="prop_element_type">
            <label class="desc" for="element_type">
            Field Type 
            <a href="#" class="tooltip" title="Field Type" rel="Field Type detemines what kind of data can be collected by your field. After you save the form, the field type cannot be changed.">(?)</a>
            </label>
            <select class="select full" id="element_type" autocomplete="off" tabindex="12" onchange="set_properties(JJ(this).val(), 'type')">
                <option value="text">Single Line Text</option>
                <option value="textarea">Paragraph Text</option>
                <option value="radio">Multiple Choice</option>
                <option value="checkbox">Checkboxes</option>
                <option value="select">Drop Down</option>
                <option value="number">Number</option>
                <option value="simple_name">Name</option>
                <option value="date">Date</option>
                <option value="time">Time</option>
                <option value="phone">Phone</option>
                <option value="money">Price</option>
                <option value="url">Web Site</option>
                <option value="email">Email</option>
                <option value="address">Address</option>
                <option value="file">File Upload</option>
                <option value="section">Section Break</option>
            </select>
        </li>

            <li class="right half" id="prop_element_size">
                <label class="desc" for="field_size">
                Field Size
                <a href="#" class="tooltip" title="Field Size" rel="This property set the visual appearance of the field in your form. It does not limit nor increase the amount of data that can be collected by the field.">(?)</a>
                </label>
                <select class="select full" id="field_size" autocomplete="off" tabindex="13" onchange="set_properties(JJ(this).val(), 'size')">
                    <option value="small">Small</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                </select>
            </li>

            <li class="right half" id="prop_element_lookup">
                <label class="desc" for="field_lookup">
                Field Lookup
                <a href="#" class="tooltip" title="Field Lookup" rel="This property set the visual appearance of the field in your form. It does not limit nor increase the amount of data that can be collected by the field.">(?)</a>
                </label>
                <?php echo CHtml::dropDownList('', '', $types, array('class'=>'select full', 'id'=>'field_lookup', 'tabindex'=>13, 'onchange'=>'load_lookup(JJ(this).val())', 'autocomplete'=>'off', 'prompt'=>'---Select---'));?>
            </li>

            <li class="right half" id="prop_date_format">
                <label class="desc" for="field_size">
                Date Format
                <a href="#" class="tooltip" title="Date Format" rel="You can choose between American and European Date Formats">(?)</a>
                </label>
                <select class="select full" id="date_type" autocomplete="off" onchange="set_properties(JJ(this).val(), 'type')">
                    <option id="element_date" value="date">MM / DD / YYYY</option>
                    <option id="element_europe_date" value="europe_date">DD / MM / YYYY</option>
                </select>
            </li>

            <li class="right half" id="prop_name_format">
                <label class="desc" for="name_format">
                Name Format
                <a href="#" class="tooltip" title="Name Format" rel="Two format available. A normal name field, or an extended name field with title and suffix.">(?)</a>
                </label>
                <select class="select full" id="name_format" autocomplete="off" onchange="set_properties(JJ(this).val(), 'type')">
                    <option id="element_simple_name" value="simple_name" selected="selected">Normal</option>
                    <option id="element_name" value="name">Extended</option>
                </select>
            </li>

            <li class="right half" id="prop_phone_format">
                <label class="desc" for="field_size">
                Phone Format
                <a href="#" class="tooltip" title="Phone Format" rel="You can choose between American and International Phone Formats">(?)</a>
                </label>
                <select class="select full" id="phone_format" autocomplete="off" onchange="set_properties(JJ(this).val(), 'type')">
                    <option id="element_phone" value="phone">(###) ### - ####</option>
                    <option id="element_simple_phone" value="simple_phone">International</option>
                </select>
            </li>

            <li class="right half" id="prop_currency_format">
                <label class="desc" for="field_size">
                Currency Format
                </label>
                <select class="select full" id="money_format" autocomplete="off" onchange="set_properties(JJ(this).val(), 'constraint')">
                    <option id="element_money_usd" value="dollar">$ Dollars</option>
                    <option id="element_money_euro" value="euro">? Euros</option>
                    <option id="element_money_pound" value="pound">? Pounds</option>
                    <option id="element_money_yen" value="yen">? Yen</option>
                </select>
            </li>

            <li class="clear" id="prop_choices">
                <fieldset class="choices">
                <legend>
                Choices
                <a href="#" class="tooltip" title="Choices" rel="Use the plus and minus buttons to add and delete choices. Click on the star to make a choice the default selection.">(?)</a>
                </legend>
                <ul id="element_choices">
                </ul>
                </fieldset>
            </li>

            <li class="clear" id="prop_options">
                <fieldset class="fieldset">
                <legend>Rules</legend>
                <input id="element_required" class="checkbox" value="" tabindex="14" onclick="(this.checked) ? checkVal = '1' : checkVal = '0';set_properties(checkVal, 'is_required')" type="checkbox">
                <label class="choice" for="element_required">Required</label>
                <a href="#" class="tooltip" title="Required" rel="Checking this rule will make sure that a user fills out a particular field. A message will be displayed to the user if they have not filled out the field.">(?)</a><br>
                <span id="element_unique_span">
                <input id="element_unique" class="checkbox" value="" tabindex="15" onchange="(this.checked) ? checkVal = '1' : checkVal = '0';set_properties(checkVal, 'is_unique')" type="checkbox"> 
                <label class="choice" for="element_unique">No Duplicates</label>  
                <a href="#" class="tooltip" title="No Duplicates" rel="Checking this rule will verify that the data entered into this field is unique and has not been submitted previously.">(?)</a></span><br>
                </fieldset>
            </li>

            <li class="left half clear" id="prop_randomize">
                <fieldset class="fieldset">
                <legend>Randomize</legend>
                <input id="element_not_random" name="randomize" class="radio" value="" checked="checked" tabindex="16" onclick="set_properties('', 'constraint')" type="radio">
                <label class="choice" for="element_not_random">Static Order</label>
                <a href="#" class="tooltip" title="Static Order" rel="This is the default option. Options will always be displayed in the order you have created them.">(?)</a><br>

                <input id="element_random" name="randomize" class="radio" value="" tabindex="16" onclick="set_properties('random', 'constraint')" type="radio">
                <label class="choice" for="element_random">Random Order</label>
                <a href="#" class="tooltip" title="Random Order" rel="Choose this if you would like the options to be shuffled around each time someone views your form.">(?)</a><br>
                </fieldset>
            </li>

            <li class="clear" id="prop_time_noseconds" style="padding-top: 5px">
                <input id="time_noseconds" class="checkbox" value="" onclick="(this.checked) ? checkVal = 'show_seconds' : checkVal = '';set_properties(checkVal, 'constraint')" type="checkbox" style="margin-left: 0px;margin-top: -15px">
                <label class="choice" for="time_noseconds">Show Seconds field</label>
                <a href="#" class="tooltip" title="Show Seconds field" rel="Checking this will enable Seconds field on your time field.">(?)</a><br>
            </li>

            <li class="clear" id="prop_default_value">
                <label class="desc" for="element_default">
                Default Value
                <a href="#" class="tooltip" title="Default Value" rel="By setting this value, the field will be prepopulated with the text you enter.">(?)</a>
                </label>

                <input id="element_default" class="text large" name="text" value="" tabindex="11" maxlength="255" onkeyup="set_properties(JJ(this).val(), 'default_value')" onblur="set_properties(JJ(this).val(), 'default_value')" type="text">
            </li>

            <li class="left half" id="prop_file_limit">
                <label class="desc" for="element_file_limit">
                File limit
                <a href="#" class="tooltip" title="File limit" rel="By setting this value, limit number of files will upload.">(?)</a>
                </label>

                <select class="select full" id="element_file_limit" onchange="set_properties(JJ(this).val(), 'file_limit')">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="-1">unlimited</option>
                </select>
            </li>
            <li class="right half" id="prop_file_ext">
                <label class="desc" for="element_file_ext">
                Allow Extensions
                <a href="#" class="tooltip" title="Allow Extensions" rel="Allow Extensions.">(?)</a>
                </label>
                <input id="element_file_ext" class="text full" name="text" value="" tabindex="11" maxlength="255" onkeyup="set_properties(JJ(this).val(), 'file_ext')" onblur="set_properties(JJ(this).val(), 'file_ext')" type="text">
            </li>

            <li class="clear" id="prop_default_country">
                <label class="desc" for="fieldaddress_default">
                Default Country
                <a href="#" class="tooltip" title="Default Country" rel="By setting this value, the country field will be prepopulated with the selection you make.">(?)</a>
                </label>
                <select class="select medium" id="element_countries" onchange="set_properties(JJ(this).val(), 'default_value')">
                    <option value=""></option>

                    <optgroup label="North America">
                    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                    <option value="Bahamas">Bahamas</option>
                    <option value="Barbados">Barbados</option> 
                    <option value="Belize">Belize</option> 
                    <option value="Canada">Canada</option> 
                    <option value="Costa Rica">Costa Rica</option> 
                    <option value="Cuba">Cuba</option> 
                    <option value="Dominica">Dominica</option> 
                    <option value="Dominican Republic">Dominican Republic</option>
                    <option value="El Salvador">El Salvador</option>
                    <option value="Grenada">Grenada</option> 
                    <option value="Guatemala">Guatemala</option> 
                    <option value="Haiti">Haiti</option> 
                    <option value="Honduras">Honduras</option> 
                    <option value="Jamaica">Jamaica</option> 
                    <option value="Mexico">Mexico</option> 
                    <option value="Nicaragua">Nicaragua</option> 
                    <option value="Panama">Panama</option> 
                    <option value="Puerto Rico">Puerto Rico</option> 
                    <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option> 
                    <option value="Saint Lucia">Saint Lucia</option>
                    <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option> 
                    <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                    <option value="United States">United States</option>
                    </optgroup>

                    <optgroup label="South America">
                    <option value="Argentina">Argentina</option>
                    <option value="Bolivia">Bolivia</option> 
                    <option value="Brazil">Brazil</option> 
                    <option value="Chile">Chile</option> 
                    <option value="Columbia">Columbia</option>
                    <option value="Ecuador">Ecuador</option> 
                    <option value="Guyana">Guyana</option> 
                    <option value="Paraguay">Paraguay</option> 
                    <option value="Peru">Peru</option> 
                    <option value="Suriname">Suriname</option> 
                    <option value="Uruguay">Uruguay</option> 
                    <option value="Venezuela">Venezuela</option>
                    </optgroup>

                    <optgroup label="Europe">
                    <option value="Albania">Albania</option>
                    <option value="Andorra">Andorra</option>
                    <option value="Armenia">Armenia</option>
                    <option value="Austria">Austria</option>
                    <option value="Azerbaijan">Azerbaijan</option>
                    <option value="Belarus">Belarus</option>
                    <option value="Belgium">Belgium</option> 
                    <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                    <option value="Bulgaria">Bulgaria</option> 
                    <option value="Croatia">Croatia</option> 
                    <option value="Cyprus">Cyprus</option> 
                    <option value="Czech Republic">Czech Republic</option>
                    <option value="Denmark">Denmark</option> 
                    <option value="Estonia">Estonia</option> 
                    <option value="Finland">Finland</option> 
                    <option value="France">France</option> 
                    <option value="Georgia">Georgia</option>
                    <option value="Germany">Germany</option>
                    <option value="Greece">Greece</option> 
                    <option value="Hungary">Hungary</option> 
                    <option value="Iceland">Iceland</option> 
                    <option value="Ireland">Ireland</option> 
                    <option value="Italy">Italy</option> 
                    <option value="Latvia">Latvia</option> 
                    <option value="Liechtenstein">Liechtenstein</option>
                    <option value="Lithuania">Lithuania</option> 
                    <option value="Luxembourg">Luxembourg</option> 
                    <option value="Macedonia">Macedonia</option> 
                    <option value="Malta">Malta</option> 
                    <option value="Moldova">Moldova</option> 
                    <option value="Monaco">Monaco</option> 
                    <option value="Montenegro">Montenegro</option> 
                    <option value="Netherlands">Netherlands</option> 
                    <option value="Norway">Norway</option> 
                    <option value="Poland">Poland</option> 
                    <option value="Portugal">Portugal</option>
                    <option value="Romania">Romania</option> 
                    <option value="San Marino">San Marino</option>
                    <option value="Serbia">Serbia</option>
                    <option value="Slovakia">Slovakia</option>
                    <option value="Slovenia">Slovenia</option> 
                    <option value="Spain">Spain</option> 
                    <option value="Sweden">Sweden</option> 
                    <option value="Switzerland">Switzerland</option> 
                    <option value="Ukraine">Ukraine</option> 
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="Vatican City">Vatican City</option>
                    </optgroup>

                    <optgroup label="Asia">
                    <option value="Afghanistan">Afghanistan</option>
                    <option value="Bahrain">Bahrain</option>
                    <option value="Bangladesh">Bangladesh</option>
                    <option value="Bhutan">Bhutan</option>
                    <option value="Brunei Darussalam">Brunei Darussalam</option>
                    <option value="Myanmar">Myanmar</option>
                    <option value="Cambodia">Cambodia</option>
                    <option value="China">China</option>
                    <option value="East Timor">East Timor</option>
                    <option value="Hong Kong">Hong Kong</option> 
                    <option value="India">India</option>
                    <option value="Indonesia">Indonesia</option>
                    <option value="Iran">Iran</option>
                    <option value="Iraq">Iraq</option>
                    <option value="Israel">Israel</option>
                    <option value="Japan">Japan</option>
                    <option value="Jordan">Jordan</option>
                    <option value="Kazakhstan">Kazakhstan</option>
                    <option value="North Korea">North Korea</option>
                    <option value="South Korea">South Korea</option>
                    <option value="Kuwait">Kuwait</option> 
                    <option value="Kyrgyzstan">Kyrgyzstan</option> 
                    <option value="Laos">Laos</option> 
                    <option value="Lebanon">Lebanon</option> 
                    <option value="Malaysia">Malaysia</option> 
                    <option value="Maldives">Maldives</option> 
                    <option value="Mongolia">Mongolia</option> 
                    <option value="Nepal">Nepal</option> 
                    <option value="Oman">Oman</option> 
                    <option value="Pakistan">Pakistan</option> 
                    <option value="Philippines">Philippines</option> 
                    <option value="Qatar">Qatar</option> 
                    <option value="Russia">Russia</option> 
                    <option value="Saudi Arabia">Saudi Arabia</option> 
                    <option value="Singapore">Singapore</option> 
                    <option value="Sri Lanka">Sri Lanka</option>
                    <option value="Syria">Syria</option>
                    <option value="Taiwan">Taiwan</option> 
                    <option value="Tajikistan">Tajikistan</option> 
                    <option value="Thailand">Thailand</option> 
                    <option value="Turkey">Turkey</option> 
                    <option value="Turkmenistan">Turkmenistan</option> 
                    <option value="United Arab Emirates">United Arab Emirates</option>
                    <option value="Uzbekistan">Uzbekistan</option> 
                    <option value="Vietnam">Vietnam</option> 
                    <option value="Yemen">Yemen</option>
                    </optgroup>

                    <optgroup label="Oceania">
                    <option value="Australia">Australia</option>
                    <option value="Fiji">Fiji</option> 
                    <option value="Kiribati">Kiribati</option>
                    <option value="Marshall Islands">Marshall Islands</option> 
                    <option value="Micronesia">Micronesia</option> 
                    <option value="Nauru">Nauru</option> 
                    <option value="New Zealand">New Zealand</option>
                    <option value="Palau">Palau</option>
                    <option value="Papua New Guinea">Papua New Guinea</option>
                    <option value="Samoa">Samoa</option> 
                    <option value="Solomon Islands">Solomon Islands</option>
                    <option value="Tonga">Tonga</option> 
                    <option value="Tuvalu">Tuvalu</option>  
                    <option value="Vanuatu">Vanuatu</option>
                    </optgroup>

                    <optgroup label="Africa">
                    <option value="Algeria">Algeria</option> 
                    <option value="Angola">Angola</option> 
                    <option value="Benin">Benin</option> 
                    <option value="Botswana">Botswana</option> 
                    <option value="Burkina Faso">Burkina Faso</option> 
                    <option value="Burundi">Burundi</option> 
                    <option value="Cameroon">Cameroon</option> 
                    <option value="Cape Verde">Cape Verde</option>
                    <option value="Central African Republic">Central African Republic</option>
                    <option value="Chad">Chad</option>  
                    <option value="Comoros">Comoros</option>  
                    <option value="Congo">Congo</option>
                    <option value="Djibouti">Djibouti</option> 
                    <option value="Egypt">Egypt</option> 
                    <option value="Equatorial Guinea">Equatorial Guinea</option> 
                    <option value="Eritrea">Eritrea</option> 
                    <option value="Ethiopia">Ethiopia</option> 
                    <option value="Gabon">Gabon</option> 
                    <option value="Gambia">Gambia</option> 
                    <option value="Ghana">Ghana</option> 
                    <option value="Guinea">Guinea</option> 
                    <option value="Guinea-Bissau">Guinea-Bissau</option>
                    <option value="C?te d'Ivoire">C?te d'Ivoire</option> 
                    <option value="Kenya">Kenya</option> 
                    <option value="Lesotho">Lesotho</option> 
                    <option value="Liberia">Liberia</option> 
                    <option value="Libya">Libya</option> 
                    <option value="Madagascar">Madagascar</option> 
                    <option value="Malawi">Malawi</option> 
                    <option value="Mali">Mali</option>
                    <option value="Mauritania">Mauritania</option> 
                    <option value="Mauritius">Mauritius</option> 
                    <option value="Morocco">Morocco</option> 
                    <option value="Mozambique">Mozambique</option> 
                    <option value="Namibia">Namibia</option>
                    <option value="Niger">Niger</option>
                    <option value="Nigeria">Nigeria</option> 
                    <option value="Rwanda">Rwanda</option> 
                    <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                    <option value="Senegal">Senegal</option> 
                    <option value="Seychelles">Seychelles</option> 
                    <option value="Sierra Leone">Sierra Leone</option>
                    <option value="Somalia">Somalia</option> 
                    <option value="South Africa">South Africa</option>
                    <option value="Sudan">Sudan</option> 
                    <option value="Swaziland">Swaziland</option> 
                    <option value="United Republic of Tanzania">Tanzania</option>
                    <option value="Togo">Togo</option> 
                    <option value="Tunisia">Tunisia</option> 
                    <option value="Uganda">Uganda</option> 
                    <option value="Zambia">Zambia</option> 
                    <option value="Zimbabwe">Zimbabwe</option>
                    </optgroup>
                </select>
            </li>

            <li class="clear" id="prop_phone_default">
                <label class="desc" for="element_phone_default1">
                Default Value
                <a href="#" class="tooltip" title="Default Value" rel="By setting this value, the field will be prepopulated with the text you enter.">(?)</a>
                </label>

                ( <input id="element_phone_default1" class="text" size="3" name="text" value="" tabindex="11" maxlength="3" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text"> ) 

                <input id="element_phone_default2" class="text" size="3" name="text" value="" tabindex="11" maxlength="3" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text"> -
                <input id="element_phone_default3" class="text" size="4" name="text" value="" tabindex="11" maxlength="4" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text">
            </li>

            <li class="clear">
                <label class="desc" for="element_instructions">
                Guidelines for User 
                <a href="#" class="tooltip" title="Guidelines" rel="This text will be displayed to your users while they're filling out particular field.">(?)</a>
                </label>

                <textarea class="textarea full" rows="10" cols="50" id="element_instructions" tabindex="18" onkeyup="set_properties(this.value, 'guidelines')" onblur="set_properties(this.value, 'guidelines')"></textarea>
            </li>
        </ul>
    </form>

    <!-- Add another element -->
    <ul id="add_elements_button" style="display: none; padding-top: 5px">
        <li class="buttons" id="list_buttons">
            <a href="#" onclick="display_fields(0);return false">
            <img src="<?php echo themeUrl() ?>/images/formBuilder/icons/textfield_add.gif" alt="">Add Another Field</a>
        </li>
    </ul>

    <!-- Form properties -->
    <form style="display: none;" id="form_properties" action="" onsubmit="return false;">
        <ul>
            <li>
                <div class="left">
                    <label class="desc" for="form_content_type_name">Form name<a class="tooltip" title="Module" rel="Name of the Content Type.">(?)</a></label>
                    <input id="form_content_type_name" class="text medium" value="" tabindex="1" maxlength="50" onkeyup="update_form(this.value, 'content_type_name');update_form(this.value, 'name');" onblur="update_form(this.value, 'content_type_name');update_form(this.value, 'name')" type="text">
                    <input id="form_title" type="hidden" name="form_title" value="" />
                </div>
            </li>
            
            <li>
            <label class="desc" for="form_module">Module <a class="tooltip" title="Module" rel="Name of the Module.">(?)</a></label>
            <select class="select medium" id="form_module" onchange="update_form(JJ(this).val(), 'module')">
                <option value="Site">Site</option>
                <?php $htmlOptions=array();echo CHtml::listOptions($form->module, $modules,$htmlOptions);?>
            </select>
            </li>

            <li>
            <label class="desc" for="form_table_name">Table name <a class="tooltip" title="Table Name" rel="Name of the table in database to store data of this form.">(?)</a></label>
            <input id="form_table_name" class="text medium" value="" tabindex="1" maxlength="50" onkeyup="update_form(this.value, 'table_name')" onblur="update_form(this.value, 'table_name')" type="text">
            </li>

            <li>
            <label class="desc" for="form_description">Description <a class="tooltip" title="Description" rel="This will appear directly below the form name. Useful for displaying a short description or any instructions, notes, guidelines.">(?)</a></label>
            <textarea class="textarea small" rows="10" cols="50" id="form_description" tabindex="2" onkeyup="update_form(this.value, 'description')" onblur="update_form(this.value, 'description')"></textarea>
            </li>

            <li>
            <input id="form_email_option" class="checkbox" value="" tabindex="5" type="checkbox">
            <label class="choice" for="form_email_option"><b>Send notification email on new submission</b></label>
            <a class="tooltip" title="Send notification email on new submission" rel="If enabled, Send notification email on new submission.">(?)</a><br>
            <div id="form_email" class="hide">
            <textarea class="form_email_data small" rows="10" cols="50" id="form_email_data" tabindex="2" onkeyup="update_form(this.value, 'email')" onblur="update_form(this.value, 'email')"></textarea>
            </div>
            </li>

            <li>
            <label class="choice" for="form_permission"><b>Permission</b></label>
            <a class="tooltip" title="Who can use this form to submit data ?" rel="If enabled, Who can use this form to submit data">(?)</a><br>
            <?php echo CHtml::checkBoxList('form_permission', $form->permission, $roles, array('class'=>'checkbox permission'));?>
            <?php Yii::app()->clientScript->registerScript('ChangePermission', "
JJ('.permission').change(function(){
    var role = main_form.data['permission'];
    var value = JJ(this).val();
    var reg = new RegExp(value);
    if (JJ(this).get(0).checked && reg.test(role) == false)
    {
        if (role.length)
            role += ',';
        role += value;
    }
    else if (JJ(this).get(0).checked == false && reg.test(role) == true)
    {
        var reg = new RegExp(','+value);
        if (reg.test(role))
            role = role.replace(','+value, '');
        else
        {
            var reg = new RegExp(value+',');
            if (reg.test(role))
                role = role.replace(value+',', '');
            else
                role = role.replace(value, '');
        }
    }
    update_form(role, 'permission');
});");?>
            </li>

            <li>
            <input id="form_captcha" class="checkbox" value="" onchange="(this.checked)?update_form('1', 'captcha'):update_form('0','captcha');" tabindex="6" type="checkbox">
            <label class="choice" for="form_captcha"><b>Turn On Spam Protection (CAPTCHA)</b></label>
            <a class="tooltip" title="Turn On Spam Protection (CAPTCHA)" rel="If enabled, an image with random words will be generated (audio also provided) and users will be required to enter the correct words to be able submitting your form. This is useful to prevent abuse from bots or automated programs usually written to generate spam.">(?)</a><br>
            </li>

            <li>
            <input id="form_log" class="checkbox" value="" onchange="(this.checked)?update_form('1', 'log'):update_form('0','log');" tabindex="6" type="checkbox">
            <label class="choice" for="form_log"><b>Log submitter information</b></label>
            <a class="tooltip" title="Log submitter information" rel="Log submitter information">(?)</a><br>
            </li>

            <li>
            <fieldset>
            <legend>Success Message</legend>

            <div class="left">
            <input id="form_success_message_option" name="confirmation" class="radio" value="" checked="checked" tabindex="8" onclick="update_form('', 'redirect'); Element.removeClassName('form_success_message', 'hide');Element.addClassName('form_redirect_url', 'hide')" type="radio">
            <label class="choice" for="form_success_message_option">Show Text</label>
            <a class="tooltip" title="Success Message" rel="This message will be displayed after your users have successfully submitted an entry.">(?)</a>
            </div>

            <div class="right">
            <input id="form_redirect_option" name="confirmation" class="radio" value="" tabindex="7" onclick="update_form(redirect_url, 'redirect'); Element.addClassName('form_success_message', 'hide');Element.removeClassName('form_redirect_url', 'hide');" type="radio">
            <label class="choice" for="form_redirect_option">Redirect URL</label>
            <a class="tooltip" title="Redirect URL" rel="After your users have successfully submitted an entry, you can redirect them to another 
            website/URL of your choice.">(?)</a>
            </div>

            <textarea class="textarea full" rows="10" cols="50" id="form_success_message" tabindex="9" onkeyup="update_form(JJ(this).val(), 'success_message')" onblur="update_form(JJ(this).val(), 'success_message')"><?php echo $form->success_message; ?></textarea>

            <input id="form_redirect_url" class="text full hide" name="text" value="http://" tabindex="10" onkeyup="redirect_url = JJ(this).val();update_form(JJ(this).val(), 'redirect')" onblur="urlInHistory = JJ(this).val();update_form(JJ(this).val(), 'redirect')" type="text">
            </fieldset>
            </li>
        </ul>
        <script type="text/javascript">
        JJ('#form_content_type_name').blur(function(){
            var text = JJ(this).val();
            if (JJ('#form_title').val().length <= 0)
            {
                JJ('#form_title').val(text);
                update_form(text, 'name');
            }
            if (JJ('#form_table_name').val().length <= 0)
            {
                var alias = text
                        .toLowerCase() // change everything to lowercase
                        .replace(/^\s+|\s+$/g, '') // trim leading and trailing spaces        
                        .replace(/[_|\s]+/g, '_') // change all spaces and underscores to a hyphen
                        .replace(/[^a-z0-9\-_]+/g, '') // remove all non-alphanumeric characters except the hyphen
                        .replace(/[-]+/g, '_') // replace multiple instances of the hyphen with a single instance
                        .replace(/^-+|-+$/g, '') // trim leading and trailing hyphens                
                        ;
                JJ('#form_table_name').val(alias);
                update_form(alias, 'table_name');
            }
        });
        JJ('#form_prop_tab').click(function(){
            setTimeout(function(){JJ('#form_content_type_name').trigger('blur');},500)
        });
        </script>
    </form>
</div>
<!--End Sidebar -->

<?php 
    $footer_data =<<<EOT
<script type="text/javascript">
var json_form = {$json_form};
var json_elements = {$json_element};
</script>
EOT;


?>


</div><!--end panel-->

</div><!--end container-->

<?php if(!empty($footer_data)){ echo $footer_data; } ?>
</div>
